<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03车辆管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        . !rounded-button {
            border-radius: 6px;
        }

        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        .tab-active {
            background-color: #e6f7ff;
            color: #1890ff;
            border-bottom: 2px solid #1890ff;
        }

        .vehicle-card {
            transition: all 0.2s;
        }

        .vehicle-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .vehicle-card.selected {
            border-color: #3b82f6;
            background-color: #eff6ff;
        }

        .status-online {
            background-color: #10b981;
        }

        .status-offline {
            background-color: #9ca3af;
        }

        .status-busy {
            background-color: #3b82f6;
        }

        .status-maintenance {
            background-color: #ef4444;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background-color: white;
            border-radius: 8px;
            width: 700px;
            max-height: 90vh;
            overflow-y: auto;
        }

        .progress-bar {
            height: 8px;
            background-color: #f3f4f6;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: #52c41a;
        }

        .tab-pane {
            display: none;
        }

        .tab-pane.active {
            display: block;
        }

        .tab-button {
            padding: 8px 16px;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            font-size: 14px;
        }

        .tab-button.active {
            color: #1890ff;
            border-bottom-color: #1890ff;
            background-color: #e6f7ff;
        }

        .edit-icon-btn {
            background: none;
            border: none;
            color: #3b82f6;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .edit-icon-btn:hover {
            background-color: #f0f9ff;
        }

        .info-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .stat-card {
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .blue-bar {
            width: 3px;
            height: 16px;
            background-color: #3b82f6;
            border-radius: 2px;
            display: inline-block;
            margin-right: 8px;
        }
    </style>
</head>

<body class="bg-gray-50">
    <!-- 顶部标题栏 -->
    <header style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);" class="text-white py-2.5 px-6 shadow-xl">
        <div class="flex justify-between items-center">
            <div class="flex-1"></div>
            <h1 class="text-3xl font-bold flex-1 text-center tracking-wide">马鞍山非急救转运调度中心</h1>
            <div class="flex-1 flex justify-end items-center space-x-4">
                <div style="background: rgba(255, 255, 255, 0.2);" class="flex items-center space-x-3 px-4 py-2 rounded-full backdrop-blur-sm">
                    <i class="fas fa-user-circle text-xl"></i>
                    <span class="font-medium">调度员 张晓丽</span>
                </div>
                <button style="transition: all 0.3s ease;" class="text-white hover:bg-white/20 p-3 rounded-full transition-all duration-300 hover:rotate-90">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);" class="shadow-lg sticky top-0 z-50">
        <div class="flex justify-center">
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-th-large text-lg" style="transition: all 0.3s ease;"></i>
                <span>调度中心</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-clipboard-list text-lg" style="transition: all 0.3s ease;"></i>
                <span>订单管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-users text-lg" style="transition: all 0.3s ease;"></i>
                <span>人员管理</span>
            </a>
            <a href="#" class="nav-item active px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; color: #3B82F6; font-weight: 600;">
                <i class="fas fa-ambulance text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆管理</span>
                <span style="content: ''; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);"></span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-truck text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆状态</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-map-marked-alt text-lg" style="transition: all 0.3s ease;"></i>
                <span>实时监控</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-coins text-lg" style="transition: all 0.3s ease;"></i>
                <span>财务管理</span>
            </a>
        </div>
    </nav>

    <div class="w-full min-h-screen bg-gray-50">
        <div class="w-full flex h-[calc(100vh-120px)]">
            <!-- 左侧车辆列表 -->
            <div class="w-96 bg-white border-r border-gray-200 overflow-y-auto">
                <!-- 车辆分类标签 -->
                <div class="p-4 border-b border-gray-200">
                    <div class="flex space-x-4 text-sm">
                        <div class="cursor-pointer tab-active px-3 py-1" data-tab="all">全部车辆</div>
                        <div class="cursor-pointer px-3 py-1" data-tab="online">在线</div>
                        <div class="cursor-pointer px-3 py-1" data-tab="offline">离线</div>
                        <div class="cursor-pointer px-3 py-1" data-tab="maintenance">维修中</div>
                    </div>
                </div>

                <!-- 搜索框 -->
                <div class="p-4 border-b border-gray-200">
                    <div class="relative">
                        <input type="text" placeholder="搜索车牌号、车型、负责人"
                            class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>

                <!-- 车辆列表 -->
                <div class="p-4 space-y-3" id="vehicleList">
                    <!-- 车辆卡片将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 右侧详情和操作区域 -->
            <div class="flex-1 p-6 overflow-y-auto">
                <!-- 功能操作栏 -->
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-gray-900">车辆管理</h2>
                    <div class="flex space-x-3">
                        <button class="bg-blue-600 text-white px-4 py-2 rounded flex items-center" id="addVehicleBtn">
                            <i class="fas fa-plus mr-2"></i> 添加新车辆
                        </button>
                        <button class="border border-gray-300 px-4 py-2 rounded flex items-center">
                            <i class="fas fa-upload mr-2"></i> 批量导入
                        </button>
                        <button class="border border-gray-300 px-4 py-2 rounded flex items-center">
                            <i class="fas fa-download mr-2"></i> 导出数据
                        </button>
                    </div>
                </div>

                <!-- 车辆详细信息与状态监控（合并区域） -->
                <div class="bg-white shadow-sm p-6 rounded-lg mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-medium text-gray-900">车辆信息</h3>
                    </div>


                    <!-- 详细信息内容 -->
                    <div id="details-tab" class="tab-pane active">
                        <div id="vehicleDetails">
                            <!-- 车辆详细信息将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <!-- 状态监控内容 -->
                    <div id="status-tab" class="tab-pane">
                        <div id="vehicleStatus">
                            <!-- 车辆状态监控将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 维护记录与车载设备 -->
                <div class="bg-white shadow-sm p-6 rounded-lg">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-medium text-gray-900">车辆维护与设备</h3>
                    </div>
                    <div class="border-b border-gray-200 mb-6">
                        <div class="flex space-x-6">
                            <button class="tab-button active" data-maintenance-tab="maintenance">维护记录</button>
                            <button class="tab-button" data-maintenance-tab="equipment">车载设备</button>
                        </div>
                    </div>

                    <!-- 维护记录内容 -->
                    <div id="maintenance-tab" class="tab-pane active">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="text-md font-medium">维护记录</h4>
                            <button class="bg-blue-600 text-white px-4 py-2 rounded flex items-center"
                                id="addMaintenanceBtn">
                                <i class="fas fa-tools mr-2"></i> 添加维护记录
                            </button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            日期</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            车牌号</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            维护类型</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            维护内容</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            费用</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            维修人员</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200" id="maintenanceTable">
                                    <!-- 维护记录将通过JavaScript动态生成 -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 车载设备内容 -->
                    <div id="equipment-tab" class="tab-pane">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="text-md font-medium">车载设备</h4>
                            <button class="bg-blue-600 text-white px-4 py-2 rounded flex items-center"
                                id="addEquipmentBtn">
                                <i class="fas fa-plus mr-2"></i> 添加设备
                            </button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            序号</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            设备编号</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            设备名称</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            设备型号</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            投入日期</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            版本号</th>
                                        <th
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            备注</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200" id="equipmentTable">
                                    <!-- 车载设备将通过JavaScript动态生成 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑车辆模态框 -->
    <div class="modal" id="vehicleModal">
        <div class="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium" id="modalTitle">添加新车辆</h3>
                    <button class="text-gray-400 hover:text-gray-500" id="closeModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form id="vehicleForm" class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">车牌号</label>
                            <input type="text" name="plateNumber"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入车牌号" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">车型</label>
                            <input type="text" name="brand"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入车型" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">车辆类型</label>
                            <select name="type"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                                <option value="">请选择车辆类型</option>
                                <option value="救护车">救护车</option>
                                <option value="转运车">转运车</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">发动机号</label>
                            <input type="text" name="engineNumber"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入发动机号" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">载重量</label>
                            <input type="text" name="loadCapacity"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入载重量" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">车辆负责人</label>
                            <input type="text" name="driver"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入车辆负责人" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">车辆负责人手机号</label>
                            <input type="text" name="driverPhone"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入车辆负责人手机号" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">保险到期日期</label>
                            <input type="date" name="insuranceExpiry"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">年检日期</label>
                            <input type="date" name="inspectionExpiry"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">行驶证号</label>
                            <input type="text" name="licenseNumber"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入行驶证号">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">累计油耗（升）</label>
                            <input type="number" name="fuelConsumption"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入累计油耗">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">最后定位时间</label>
                            <input type="datetime-local" name="lastLocationTime"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">配置人数</label>
                            <input type="number" name="capacity"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入配置人数">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">最后定位地点</label>
                            <input type="text" name="lastLocation"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入最后定位地点">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                            <textarea name="notes" rows="3"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入备注信息"></textarea>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 pt-4">
                        <button type="button" class="px-4 py-2 border border-gray-300 rounded"
                            id="cancelBtn">取消</button>
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 添加维护记录模态框 -->
    <div class="modal" id="maintenanceModal">
        <div class="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium">添加维护记录</h3>
                    <button class="text-gray-400 hover:text-gray-500" id="closeMaintenanceModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form id="maintenanceForm" class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">日期</label>
                            <input type="date" name="date"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">维护类型</label>
                            <select name="type"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                                <option value="">请选择维护类型</option>
                                <option value="定期保养">定期保养</option>
                                <option value="故障维修">故障维修</option>
                                <option value="年检维护">年检维护</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">费用</label>
                            <input type="number" name="cost"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入费用" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">维修人员</label>
                            <input type="text" name="technician"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入维修人员" required>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">维护内容</label>
                            <textarea name="content" rows="3"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入维护内容" required></textarea>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 pt-4">
                        <button type="button" class="px-4 py-2 border border-gray-300 rounded"
                            id="cancelMaintenanceBtn">取消</button>
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 添加设备模态框 -->
    <div class="modal" id="equipmentModal">
        <div class="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium">添加设备</h3>
                    <button class="text-gray-400 hover:text-gray-500" id="closeEquipmentModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form id="equipmentForm" class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">设备编号</label>
                            <input type="text" name="equipmentNumber"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入设备编号" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">设备名称</label>
                            <input type="text" name="equipmentName"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入设备名称" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">设备型号</label>
                            <input type="text" name="equipmentModel"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入设备型号" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">投入日期</label>
                            <input type="date" name="installDate"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
                            <input type="text" name="version"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入版本号">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                            <textarea name="notes" rows="3"
                                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入备注信息"></textarea>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 pt-4">
                        <button type="button" class="px-4 py-2 border border-gray-300 rounded"
                            id="cancelEquipmentBtn">取消</button>
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 车辆数据
        const vehicleData = [
            {
                id: 'V001',
                plateNumber: '皖E·A1234',
                type: '救护车',
                brand: '福特全顺',
                year: '2022',
                status: 'online',
                driver: '王明',
                driverPhone: '13834567890',
                location: '马鞍山市人民医院',
                mileage: 45678,
                fuelLevel: 85,
                speed: 0,
                engineNumber: 'FT2022001',
                chassisNumber: 'WFOFT2022001234',
                loadCapacity: '2吨',
                insuranceExpiry: '2025-12-31',
                inspectionExpiry: '2025-06-30',
                image: 'https://readdy.ai/api/search-image?query=modern%20white%20ambulance%20vehicle%20with%20red%20cross%20markings%20parked%20in%20hospital%20parking%20lot%20clean%20medical%20facility%20background%20professional%20emergency%20vehicle%20photography&width=300&height=200&seq=vehicle001&orientation=landscape',
                licenseNumber: '皖E123456',
                fuelConsumption: 4567,
                lastLocationTime: '2025-01-13T14:30',
                lastLocation: '马鞍山市人民医院急诊楼前',
                capacity: 6,
                notes: '车辆状态良好，定期维护'
            },
            {
                id: 'V002',
                plateNumber: '皖E·B5678',
                type: '转运车',
                brand: '依维柯',
                year: '2021',
                status: 'busy',
                driver: '赵强',
                driverPhone: '13867890123',
                location: '在途中',
                mileage: 32456,
                fuelLevel: 60,
                speed: 45,
                engineNumber: 'IV2021002',
                chassisNumber: 'WFIV2021002567',
                loadCapacity: '1.5吨',
                insuranceExpiry: '2025-08-15',
                inspectionExpiry: '2025-03-20',
                image: 'https://readdy.ai/api/search-image?query=white%20medical%20transport%20van%20with%20blue%20medical%20cross%20symbols%20driving%20on%20city%20road%20clean%20urban%20background%20professional%20healthcare%20vehicle%20photography&width=300&height=200&seq=vehicle002&orientation=landscape',
                licenseNumber: '皖E567890',
                fuelConsumption: 3245,
                lastLocationTime: '2025-01-13T13:45',
                lastLocation: '马鞍山市花山区湖南路',
                capacity: 4,
                notes: '执行转运任务中'
            },
            {
                id: 'V003',
                plateNumber: '皖E·C9012',
                type: '救护车',
                brand: '奔驰威霆',
                year: '2023',
                status: 'maintenance',
                driver: '李伟',
                driverPhone: '13845678901',
                location: '维修车间',
                mileage: 12345,
                fuelLevel: 30,
                speed: 0,
                engineNumber: 'MB2023003',
                chassisNumber: 'WFMB2023003901',
                loadCapacity: '2.5吨',
                insuranceExpiry: '2026-01-10',
                inspectionExpiry: '2025-12-15',
                image: 'https://readdy.ai/api/search-image?query=silver%20mercedes%20ambulance%20vehicle%20with%20emergency%20equipment%20in%20maintenance%20garage%20clean%20workshop%20background%20professional%20medical%20vehicle%20service&width=300&height=200&seq=vehicle003&orientation=landscape',
                licenseNumber: '皖C901234',
                fuelConsumption: 1234,
                lastLocationTime: '2025-01-12T09:15',
                lastLocation: '马鞍山市汽车维修厂',
                capacity: 7,
                notes: '发动机故障维修中'
            },
            {
                id: 'V004',
                plateNumber: '皖E·D3456',
                type: '转运车',
                brand: '金杯海狮',
                year: '2020',
                status: 'offline',
                driver: '张涛',
                driverPhone: '13856789012',
                location: '停车场',
                mileage: 67890,
                fuelLevel: 95,
                speed: 0,
                engineNumber: 'JB2020004',
                chassisNumber: 'WFJB2020004345',
                loadCapacity: '1吨',
                insuranceExpiry: '2025-05-20',
                inspectionExpiry: '2025-09-10',
                image: 'https://readdy.ai/api/search-image?query=white%20medical%20transport%20minivan%20with%20healthcare%20logos%20parked%20in%20hospital%20parking%20area%20clean%20medical%20facility%20background%20professional%20vehicle%20photography&width=300&height=200&seq=vehicle004&orientation=landscape',
                licenseNumber: '皖E345678',
                fuelConsumption: 6789,
                lastLocationTime: '2025-01-10T16:20',
                lastLocation: '马鞍山市人民医院停车场',
                capacity: 3,
                notes: '备用车辆，状态良好'
            },
            {
                id: 'V005',
                plateNumber: '皖E·E7890',
                type: '救护车',
                brand: '上汽大通',
                year: '2022',
                status: 'online',
                driver: '陈军',
                driverPhone: '13878901234',
                location: '马鞍山市中心医院',
                mileage: 28901,
                fuelLevel: 70,
                speed: 0,
                engineNumber: 'SG2022005',
                chassisNumber: 'WFSG2022005789',
                loadCapacity: '2吨',
                insuranceExpiry: '2025-11-25',
                inspectionExpiry: '2025-07-18',
                image: 'https://readdy.ai/api/search-image?query=modern%20white%20ambulance%20with%20red%20emergency%20stripes%20stationed%20at%20hospital%20entrance%20clean%20medical%20building%20background%20professional%20emergency%20response%20vehicle&width=300&height=200&seq=vehicle005&orientation=landscape',
                licenseNumber: '皖E789012',
                fuelConsumption: 2890,
                lastLocationTime: '2025-01-13T12:00',
                lastLocation: '马鞍山市中心医院急诊科',
                capacity: 5,
                notes: '主要救护车辆，设备齐全'
            },
            {
                id: 'V006',
                plateNumber: '皖E·F2345',
                type: '转运车',
                brand: '江铃福特',
                year: '2021',
                status: 'offline',
                driver: '孙磊',
                driverPhone: '13889012345',
                location: '停车场',
                mileage: 41234,
                fuelLevel: 40,
                speed: 0,
                engineNumber: 'JL2021006',
                chassisNumber: 'WFJL2021006234',
                loadCapacity: '1.8吨',
                insuranceExpiry: '2025-04-12',
                inspectionExpiry: '2025-10-05',
                image: 'https://readdy.ai/api/search-image?query=white%20ford%20medical%20transport%20vehicle%20with%20blue%20healthcare%20markings%20in%20hospital%20parking%20lot%20clean%20medical%20facility%20background%20professional%20healthcare%20vehicle&width=300&height=200&seq=vehicle006&orientation=landscape',
                licenseNumber: '皖F234567',
                fuelConsumption: 4123,
                lastLocationTime: '2025-01-11T14:30',
                lastLocation: '马鞍山市人民医院停车场',
                capacity: 4,
                notes: '定期维护完成，待命'
            }
        ];

        // 维护数据
        const maintenanceData = [
            { date: '2025-01-10', vehicle: '皖E·A1234', type: '定期保养', content: '更换机油、机滤、空滤', cost: 800, technician: '刘工' },
            { date: '2025-01-08', vehicle: '皖E·B5678', type: '故障维修', content: '更换刹车片', cost: 1200, technician: '陈工' },
            { date: '2025-01-05', vehicle: '皖E·C9012', type: '年检维护', content: '全车检查、灯光调试', cost: 500, technician: '王工' },
            { date: '2025-01-03', vehicle: '皖E·D3456', type: '定期保养', content: '更换轮胎', cost: 2400, technician: '刘工' },
            { date: '2024-12-28', vehicle: '皖E·E7890', type: '故障维修', content: '发动机检修', cost: 3500, technician: '赵工' },
            { date: '2024-12-25', vehicle: '皖E·F2345', type: '定期保养', content: '更换防冻液', cost: 300, technician: '陈工' }
        ];

        // 车载设备数据
        const equipmentData = {
            'V001': [
                { id: 1, equipmentNumber: 'EQ001', equipmentName: 'GPS定位器', equipmentModel: 'GT-100', installDate: '2023-01-15', version: 'V2.1', notes: '正常工作' },
                { id: 2, equipmentNumber: 'EQ002', equipmentName: '车载摄像头', equipmentModel: 'HC-200', installDate: '2023-01-15', version: 'V1.8', notes: '360度全景' },
                { id: 3, equipmentNumber: 'EQ003', equipmentName: '急救设备监控', equipmentModel: 'EM-300', installDate: '2023-02-20', version: 'V3.0', notes: '实时监控' }
            ],
            'V002': [
                { id: 1, equipmentNumber: 'EQ004', equipmentName: 'GPS定位器', equipmentModel: 'GT-100', installDate: '2022-05-10', version: 'V2.0', notes: '正常工作' },
                { id: 2, equipmentNumber: 'EQ005', equipmentName: '车载对讲机', equipmentModel: 'TK-150', installDate: '2022-05-10', version: 'V1.5', notes: '通讯正常' }
            ],
            'V003': [
                { id: 1, equipmentNumber: 'EQ006', equipmentName: 'GPS定位器', equipmentModel: 'GT-200', installDate: '2023-03-01', version: 'V2.5', notes: '维修中' },
                { id: 2, equipmentNumber: 'EQ007', equipmentName: '车载摄像头', equipmentModel: 'HC-300', installDate: '2023-03-01', version: 'V2.0', notes: '高清夜视' },
                { id: 3, equipmentNumber: 'EQ008', equipmentName: '生命体征监测', equipmentModel: 'LM-400', installDate: '2023-04-15', version: 'V1.2', notes: '高精度监测' }
            ],
            'V004': [
                { id: 1, equipmentNumber: 'EQ009', equipmentName: 'GPS定位器', equipmentModel: 'GT-100', installDate: '2020-08-20', version: 'V1.8', notes: '正常工作' },
                { id: 2, equipmentNumber: 'EQ010', equipmentName: '温控设备', equipmentModel: 'TC-250', installDate: '2020-08-20', version: 'V2.1', notes: '温度控制正常' }
            ],
            'V005': [
                { id: 1, equipmentNumber: 'EQ011', equipmentName: 'GPS定位器', equipmentModel: 'GT-200', installDate: '2022-11-05', version: 'V2.3', notes: '正常工作' },
                { id: 2, equipmentNumber: 'EQ012', equipmentName: '车载摄像头', equipmentModel: 'HC-300', installDate: '2022-11-05', version: 'V2.0', notes: '高清夜视' },
                { id: 3, equipmentNumber: 'EQ013', equipmentName: '急救设备监控', equipmentModel: 'EM-350', installDate: '2022-12-10', version: 'V3.2', notes: '实时监控' }
            ],
            'V006': [
                { id: 1, equipmentNumber: 'EQ014', equipmentName: 'GPS定位器', equipmentModel: 'GT-150', installDate: '2021-07-15', version: 'V2.1', notes: '正常工作' },
                { id: 2, equipmentNumber: 'EQ015', equipmentName: '车载对讲机', equipmentModel: 'TK-200', installDate: '2021-07-15', version: 'V1.8', notes: '通讯正常' }
            ]
        };

        // 当前选中的车辆ID
        let selectedVehicleId = 'V001';
        // 当前选中的标签
        let activeTab = 'all';
        // 当前选中的维护标签
        let activeMaintenanceTab = 'maintenance';
        // 当前选中的信息标签
        let activeInfoTab = 'details';
        // 是否正在编辑车辆
        let editingVehicle = null;

        // 获取状态文本
        function getStatusText(status) {
            switch (status) {
                case 'online': return '在线';
                case 'offline': return '离线';
                case 'busy': return '任务中';
                case 'maintenance': return '维修中';
                default: return '未知';
            }
        }

        // 获取状态颜色
        function getStatusColor(status) {
            switch (status) {
                case 'online': return 'bg-green-500';
                case 'offline': return 'bg-gray-400';
                case 'busy': return 'bg-blue-500';
                case 'maintenance': return 'bg-red-500';
                default: return 'bg-gray-400';
            }
        }

        // 获取状态文本颜色
        function getStatusTextColor(status) {
            switch (status) {
                case 'online': return 'bg-green-100 text-green-800';
                case 'offline': return 'bg-gray-100 text-gray-800';
                case 'busy': return 'bg-blue-100 text-blue-800';
                case 'maintenance': return 'bg-red-100 text-red-800';
                default: return 'bg-gray-100 text-gray-800';
            }
        }

        // 获取维护类型颜色
        function getMaintenanceTypeColor(type) {
            switch (type) {
                case '定期保养': return 'bg-blue-100 text-blue-800';
                case '故障维修': return 'bg-red-100 text-red-800';
                default: return 'bg-green-100 text-green-800';
            }
        }

        // 过滤车辆
        function getFilteredVehicles() {
            if (activeTab === 'all') return vehicleData;
            return vehicleData.filter(vehicle => vehicle.status === activeTab);
        }

        // 格式化日期时间
        function formatDateTime(dateTimeStr) {
            if (!dateTimeStr) return '';
            const date = new Date(dateTimeStr);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
        }

        // 渲染车辆列表
        function renderVehicleList() {
            const vehicleListElement = document.getElementById('vehicleList');
            vehicleListElement.innerHTML = '';

            const filteredVehicles = getFilteredVehicles();

            filteredVehicles.forEach(vehicle => {
                const vehicleCard = document.createElement('div');
                vehicleCard.className = `vehicle-card cursor-pointer border rounded-lg bg-white p-3 ${selectedVehicleId === vehicle.id ? 'selected' : 'border-gray-200'
                    }`;
                vehicleCard.dataset.vehicleId = vehicle.id;

                vehicleCard.innerHTML = `
                    <div class="flex items-center space-x-3">
                        <div class="relative">
                            <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
                                <img src="${vehicle.image}" alt="${vehicle.plateNumber}" class="w-full h-full object-cover object-top">
                            </div>
                            <div class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${getStatusColor(vehicle.status)}"></div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex justify-between items-start">
                                <div>
                                    <div class="font-medium text-gray-900">${vehicle.plateNumber}</div>
                                    <div class="text-sm text-gray-600">${vehicle.brand}</div>
                                    <div class="text-xs text-gray-500">负责人: ${vehicle.driver}</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-xs px-2 py-1 rounded ${getStatusTextColor(vehicle.status)}">
                                        ${getStatusText(vehicle.status)}
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2 mt-2 text-xs text-gray-500">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>${vehicle.location}</span>
                            </div>
                        </div>
                    </div>
                `;

                vehicleCard.addEventListener('click', () => {
                    selectedVehicleId = vehicle.id;
                    renderVehicleList();
                    renderVehicleDetails();
                    renderVehicleStatus();
                    renderMaintenanceTable();
                    renderEquipmentTable();
                });

                vehicleListElement.appendChild(vehicleCard);
            });
        }

        // 渲染车辆详细信息
        function renderVehicleDetails() {
            const vehicleDetailsElement = document.getElementById('vehicleDetails');
            vehicleDetailsElement.innerHTML = '';

            const vehicle = vehicleData.find(v => v.id === selectedVehicleId);
            if (!vehicle) return;

            // 重新设计的车辆信息布局 - 添加蓝色小竖条
            const detailsHtml = `
                <!-- 顶部车辆基本信息卡片 - 素色设计 -->
                <div class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-24 h-24 bg-gray-100 rounded-xl flex items-center justify-center overflow-hidden">
                                <img src="${vehicle.image}" alt="${vehicle.plateNumber}" class="w-full h-full object-cover object-top">
                            </div>
                            <div>
                                <h2 class="text-2xl font-bold text-gray-900 mb-1">${vehicle.plateNumber}</h2>
                                <p class="text-gray-600 mb-2">${vehicle.brand} · ${vehicle.type}</p>
                                <div class="flex items-center space-x-2">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm ${getStatusTextColor(vehicle.status)}">
                                        <span class="w-2 h-2 rounded-full mr-2 ${getStatusColor(vehicle.status)}"></span>
                                        ${getStatusText(vehicle.status)}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 关键数据指标 - 素色设计 -->
                        <div class="flex space-x-4">
                            <div class="stat-card bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-center">
                                <div class="text-2xl font-bold text-gray-900">${vehicle.mileage.toLocaleString()}</div>
                                <div class="text-xs text-gray-600">总里程(km)</div>
                            </div>
                            <div class="stat-card bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-center">
                                <div class="text-2xl font-bold text-gray-900">${vehicle.speed}</div>
                                <div class="text-xs text-gray-600">当前速度</div>
                            </div>
                            <div class="stat-card bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-center">
                                <div class="text-2xl font-bold text-gray-900">${vehicle.fuelLevel}%</div>
                                <div class="text-xs text-gray-600">燃油量</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 详细信息网格 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- 车辆基本信息 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <span class="blue-bar"></span>
                            车辆基本信息
                        </h3>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">车辆类型</span>
                                <span class="font-medium text-gray-900">${vehicle.type}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">发动机号</span>
                                <span class="font-medium text-gray-900">${vehicle.engineNumber}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">载重量</span>
                                <span class="font-medium text-gray-900">${vehicle.loadCapacity}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">配置人数</span>
                                <span class="font-medium text-gray-900">${vehicle.capacity} 人</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 负责人信息 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <span class="blue-bar"></span>
                            负责人信息
                        </h3>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">姓名</span>
                                <span class="font-medium text-gray-900">${vehicle.driver}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">联系电话</span>
                                <span class="font-medium text-gray-900">${vehicle.driverPhone}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">当前位置</span>
                                <span class="font-medium text-gray-900">${vehicle.location}</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 证件信息 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <span class="blue-bar"></span>
                            证件信息
                        </h3>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">行驶证号</span>
                                <span class="font-medium text-gray-900">${vehicle.licenseNumber}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">保险到期</span>
                                <span class="font-medium text-gray-900">${vehicle.insuranceExpiry}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">年检日期</span>
                                <span class="font-medium text-gray-900">${vehicle.inspectionExpiry}</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 运营数据 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <span class="blue-bar"></span>
                            运营数据
                        </h3>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">累计油耗</span>
                                <span class="font-medium text-gray-900">${vehicle.fuelConsumption} 升</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">最后定位</span>
                                <span class="font-medium text-gray-900">${formatDateTime(vehicle.lastLocationTime)}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">定位地点</span>
                                <span class="font-medium text-gray-900 text-xs">${vehicle.lastLocation}</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 状态信息 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <span class="blue-bar"></span>
                            状态信息
                        </h3>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">车辆状态</span>
                                <span class="font-medium text-gray-900">${getStatusText(vehicle.status)}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">燃油状态</span>
                                <span class="font-medium text-gray-900">
                                    ${vehicle.fuelLevel > 50 ? '充足' : vehicle.fuelLevel > 20 ? '正常' : '不足'}
                                </span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">发动机状态</span>
                                <span class="font-medium text-gray-900">
                                    ${vehicle.status === 'online' ? '正常运行' : '已停止'}
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 备注信息 -->
                    <div class="bg-gray-50 rounded-lg p-4 md:col-span-2 lg:col-span-1">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <span class="blue-bar"></span>
                            备注信息
                        </h3>
                        <div class="text-sm text-gray-600">
                            ${vehicle.notes || '暂无备注'}
                        </div>
                    </div>
                </div>
            `;

            vehicleDetailsElement.innerHTML = detailsHtml;
        }

        // 渲染车辆状态监控
        function renderVehicleStatus() {
            const vehicleStatusElement = document.getElementById('vehicleStatus');
            vehicleStatusElement.innerHTML = '';

            const vehicle = vehicleData.find(v => v.id === selectedVehicleId);
            if (!vehicle) return;

            vehicleStatusElement.innerHTML = `
                <div class="space-y-6">
                    <!-- 位置信息 -->
                    <div class="bg-blue-50 rounded-lg p-4">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-map-marker-alt text-blue-500 text-xl"></i>
                            <div>
                                <div class="text-sm font-medium text-gray-900">当前位置</div>
                                <div class="text-lg font-semibold text-blue-600">${vehicle.location}</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 燃油信息 -->
                    <div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium text-gray-700">燃油量</span>
                            <span class="text-sm font-bold text-gray-900">${vehicle.fuelLevel}%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: ${vehicle.fuelLevel}%"></div>
                        </div>
                    </div>
                    
                    <!-- 运营指标 -->
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-gray-50 rounded-lg p-4 text-center">
                            <i class="fas fa-tachometer-alt text-blue-500 text-2xl mb-2"></i>
                            <div class="text-2xl font-bold text-gray-900">${vehicle.mileage.toLocaleString()}</div>
                            <div class="text-sm text-gray-600">总里程 (km)</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 text-center">
                            <i class="fas fa-gauge-high text-green-500 text-2xl mb-2"></i>
                            <div class="text-2xl font-bold text-gray-900">${vehicle.speed}</div>
                            <div class="text-sm text-gray-600">当前速度 (km/h)</div>
                        </div>
                    </div>
                    
                    <!-- 系统状态 -->
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-engine-warning text-blue-500 text-xl"></i>
                                <div>
                                    <div class="text-sm font-medium">发动机状态</div>
                                    <div class="text-xs text-gray-600">
                                        ${vehicle.status === 'online' ? '正常运行' : '已停止'}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-gas-pump text-orange-500 text-xl"></i>
                                <div>
                                    <div class="text-sm font-medium">燃油状态</div>
                                    <div class="text-xs text-gray-600">
                                        ${vehicle.fuelLevel > 50 ? '充足' : vehicle.fuelLevel > 20 ? '正常' : '不足'}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 渲染维护记录表格
        function renderMaintenanceTable() {
            const maintenanceTableElement = document.getElementById('maintenanceTable');
            maintenanceTableElement.innerHTML = '';

            maintenanceData.forEach(record => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.date}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${record.vehicle}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 rounded text-xs ${getMaintenanceTypeColor(record.type)}">
                            ${record.type}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.content}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥${record.cost}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.technician}</td>
                `;
                maintenanceTableElement.appendChild(row);
            });
        }

        // 渲染车载设备表格
        function renderEquipmentTable() {
            const equipmentTableElement = document.getElementById('equipmentTable');
            equipmentTableElement.innerHTML = '';

            const vehicleEquipments = equipmentData[selectedVehicleId] || [];

            vehicleEquipments.forEach(equipment => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${equipment.id}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${equipment.equipmentNumber}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${equipment.equipmentName}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${equipment.equipmentModel}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${equipment.installDate}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${equipment.version}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${equipment.notes}</td>
                `;
                equipmentTableElement.appendChild(row);
            });
        }

        // 更新统计数据
        function updateStats() {
            const stats = {
                total: vehicleData.length,
                online: vehicleData.filter(v => v.status === 'online').length,
                offline: vehicleData.filter(v => v.status === 'offline').length,
                busy: vehicleData.filter(v => v.status === 'busy').length,
                maintenance: vehicleData.filter(v => v.status === 'maintenance').length
            };

            document.getElementById('totalVehicles').textContent = stats.total;
            document.getElementById('onlineVehicles').textContent = stats.online;
            document.getElementById('busyVehicles').textContent = stats.busy;
            document.getElementById('maintenanceVehicles').textContent = stats.maintenance;
        }

        // 打开模态框
        function openModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.add('active');

            // 如果是车辆模态框，设置表单标题和内容
            if (modalId === 'vehicleModal') {
                const modalTitle = document.getElementById('modalTitle');
                const form = document.getElementById('vehicleForm');

                if (editingVehicle) {
                    modalTitle.textContent = '编辑车辆信息';
                    // 填充表单数据
                    for (const key in editingVehicle) {
                        const input = form.elements[key];
                        if (input) {
                            input.value = editingVehicle[key];
                        }
                    }
                } else {
                    modalTitle.textContent = '添加新车辆';
                    form.reset();
                }
            }
        }

        // 关闭模态框
        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.remove('active');
        }

        // 初始化事件监听
        function initEventListeners() {
            // 车辆分类标签切换
            const tabElements = document.querySelectorAll('[data-tab]');
            tabElements.forEach(tab => {
                tab.addEventListener('click', () => {
                    // 移除所有标签的active类
                    tabElements.forEach(t => t.classList.remove('tab-active'));
                    // 添加当前标签的active类
                    tab.classList.add('tab-active');
                    // 更新activeTab
                    activeTab = tab.dataset.tab;
                    // 重新渲染车辆列表
                    renderVehicleList();
                });
            });

            // 车辆信息标签切换
            const infoTabElements = document.querySelectorAll('[data-info-tab]');
            infoTabElements.forEach(tab => {
                tab.addEventListener('click', () => {
                    // 移除所有标签的active类
                    infoTabElements.forEach(t => t.classList.remove('active'));
                    // 添加当前标签的active类
                    tab.classList.add('active');
                    // 更新activeInfoTab
                    activeInfoTab = tab.dataset.infoTab;

                    // 切换显示内容
                    document.getElementById('details-tab').classList.toggle('active', activeInfoTab === 'details');
                    document.getElementById('status-tab').classList.toggle('active', activeInfoTab === 'status');
                });
            });

            // 维护记录/车载设备标签切换
            const maintenanceTabElements = document.querySelectorAll('[data-maintenance-tab]');
            maintenanceTabElements.forEach(tab => {
                tab.addEventListener('click', () => {
                    // 移除所有标签的active类
                    maintenanceTabElements.forEach(t => t.classList.remove('active'));
                    // 添加当前标签的active类
                    tab.classList.add('active');
                    // 更新activeMaintenanceTab
                    activeMaintenanceTab = tab.dataset.maintenanceTab;

                    // 切换显示内容
                    document.getElementById('maintenance-tab').classList.toggle('active', activeMaintenanceTab === 'maintenance');
                    document.getElementById('equipment-tab').classList.toggle('active', activeMaintenanceTab === 'equipment');
                });
            });

            // 添加车辆按钮
            document.getElementById('addVehicleBtn').addEventListener('click', () => {
                editingVehicle = null;
                openModal('vehicleModal');
            });

            // 添加维护记录按钮
            document.getElementById('addMaintenanceBtn').addEventListener('click', () => {
                openModal('maintenanceModal');
            });

            // 添加设备按钮
            document.getElementById('addEquipmentBtn').addEventListener('click', () => {
                openModal('equipmentModal');
            });

            // 关闭车辆模态框按钮
            document.getElementById('closeModal').addEventListener('click', () => closeModal('vehicleModal'));
            document.getElementById('cancelBtn').addEventListener('click', () => closeModal('vehicleModal'));

            // 关闭维护记录模态框按钮
            document.getElementById('closeMaintenanceModal').addEventListener('click', () => closeModal('maintenanceModal'));
            document.getElementById('cancelMaintenanceBtn').addEventListener('click', () => closeModal('maintenanceModal'));

            // 关闭设备模态框按钮
            document.getElementById('closeEquipmentModal').addEventListener('click', () => closeModal('equipmentModal'));
            document.getElementById('cancelEquipmentBtn').addEventListener('click', () => closeModal('equipmentModal'));

            // 车辆表单提交
            document.getElementById('vehicleForm').addEventListener('submit', (e) => {
                e.preventDefault();

                const formData = new FormData(e.target);
                const vehicleData = Object.fromEntries(formData.entries());

                console.log('保存车辆信息:', vehicleData);

                // 关闭模态框
                closeModal('vehicleModal');

                // 重新渲染车辆列表
                renderVehicleList();
            });

            // 维护记录表单提交
            document.getElementById('maintenanceForm').addEventListener('submit', (e) => {
                e.preventDefault();

                const formData = new FormData(e.target);
                const maintenanceData = Object.fromEntries(formData.entries());

                // 获取当前选中的车辆信息
                const currentVehicle = vehicleData.find(v => v.id === selectedVehicleId);
                if (currentVehicle) {
                    maintenanceData.vehicle = currentVehicle.plateNumber;
                }

                console.log('保存维护记录:', maintenanceData);

                // 关闭模态框
                closeModal('maintenanceModal');

                // 重新渲染维护记录表格
                renderMaintenanceTable();
            });

            // 设备表单提交
            document.getElementById('equipmentForm').addEventListener('submit', (e) => {
                e.preventDefault();

                const formData = new FormData(e.target);
                const equipmentData = Object.fromEntries(formData.entries());

                console.log('保存设备信息:', equipmentData);

                // 关闭模态框
                closeModal('equipmentModal');

                // 重新渲染设备表格
                renderEquipmentTable();
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            initEventListeners();
            renderVehicleList();
            renderVehicleDetails();
            renderVehicleStatus();
            renderMaintenanceTable();
            renderEquipmentTable();
            updateStats();
        });
    </script>
</body>

</html>